<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>类目增</title>
    <script th:src="@{/layui/layui.js}" type="text/javascript"></script>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
</head>
<body>
<div>
    <form class="layui-form">

        <input type="hidden" id="imagePath" name="imagePath" th:value="${c.imagePath}">
        <input type="hidden" id="picturePath" name="picturePath" th:value="${c.picturePath}">
        <input type="hidden" id="id" name="id" th:value="${c.id}">
        <input type="hidden" th:value="${c.pid}" name="oldPid" id="oldPid"/>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <div class="layui-upload-list" >
                    <img  th:src="@{'/file/fc/showImg/'+${c.imagePath}}"
                            class="layui-upload-img" id="image"
                         style="border: 1px solid #01AAED;border-radius: 4px;width: 100px;height: 100px">
                    <p id="imageText"></p>
                </div>
                <a class="layui-btn " id="checkImage" style="width: 100px;">选择新图标</a>

                <div style="width: 200px;margin: 5px">
                    <div class="layui-progress layui-progress-big" lay-showpercent="yes"
                         lay-filter="imageProgress">
                        <div class="layui-progress-bar layui-bg-blue" lay-perent="20%"></div>
                    </div>
                </div>

            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <div class="layui-upload-list" >
                    <img th:src="@{'/file/fc/showImg/'+${c.picturePath}}"
                            class="layui-upload-img" id="picture"
                         style="border: 1px solid #01AAED;border-radius: 4px;width: 100px;height: 100px">
                    <p id="pictureText"></p>
                </div>
                <a class="layui-btn " id="checkPicture" style="width: 100px;">选择新图片</a>
                <!---->
                <div style="width: 200px;margin: 5px">
                    <div class="layui-progress layui-progress-big" lay-showpercent="yes"
                         lay-filter="pictureProgress">
                        <div class="layui-progress-bar layui-bg-blue" lay-perent="20%"></div>
                    </div>
                </div>
                <!---->
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">类目名</label>
                <div class="layui-inline">
                    <input class="layui-input" th:value="${c.name}"
                           name="name" placeholder="输入类目名" autocomplete="off"/>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">父类目id</label>
                <div class="layui-inline">
                    <select name="pid" id="pid" class="" lay-search>
                    </select>

                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">类目等级</label>
                <div class="layui-inline">
                    <select class="layui-select" id="level" name="level" lay-filter="level" lay-verify="required">
                        <option>请选择</option>
                        <option value="1">一级类目</option>
                        <option value="2">二级类目</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">类目简介</label>
            <div class="layui-input-block">
                <textarea class="layui-textarea" id="content" name="content" th:text="${c.content}"></textarea>
            </div>
        </div>


        <div class="layui-form-item" style="display: none;">
            <div class="layui-input-block">
                <a class="layui-btn" id="submitBtn" lay-submit="" lay-filter="submitBtn">提交</a>
            </div>
        </div>

    </form>
</div>

<script>
    var $,form;
    layui.use(['jquery','form','layer','upload','element','layedit'],function () {
        $ = layui.jquery;
        form = layui.form;
        var layer = layui.layer,
            upload = layui.upload,element = layui.element,
            layedit = layui.layedit;

        findParent();


        var index = layedit.build('content',{
            tool:['underline','strong','left','right','center','face'],
            height:350,
            //uploadImage:{url:'',type:'post'}
        })

        //图标上传
        var imageUpload = upload.render({
            elem:'#checkImage',
            url:'/file/fc/fileUpload',
            before:function (obj) {
                obj.preview(function (i,f,r) {
                    $('#image').attr('src',r);
                });
                element.progress('imageProgress','0%');
            },
            done:function (res) {
                if (!res.is){
                    layer.msg('上传失败，请稍后再试......');
                }else {
                    $('#imagePath').val(res.file.id);
                }
            },
            error:function(){

            },
            progress:function (n,el,e) {
                element.progress('imageProgress',n+"%");
                if (n==100){
                    layer.msg('上传完成!',{icon:1});
                }
            }
        })

        //图片上传
        var pictureUpload = upload.render({
            elem:'#checkPicture',
            url:'/file/fc/fileUpload',
            before:function (obj) {
                obj.preview(function (i,f,r) {
                    $('#picture').attr('src',r);
                });
                element.progress('pictureProgress','0%');
            },
            done:function (res) {
                if (!res.is){
                    layer.msg('上传失败，请稍后再试......');
                }else {
                    $('#picturePath').val(res.file.id);
                }
            },
            error:function(){

            },
            progress:function (n,el,e) {
                element.progress('pictureProgress',n+"%");
                if (n==100){
                    layer.msg('上传完成!',{icon:1});
                }
            }
        })


        form.on('submit(submitBtn)',function (data) {
            var formData = data.field;
            var content = layedit.getContent(index);
            formData.content = content;
            if (0 == formData.pid){
                formData.level = 1
            }
            $.ajax({
                type:'post',
                url:'/system/category/update',
                data:formData,
                dataType:'json',
                success:function (result) {
                    layer.msg(result.msg);
                    if (result.is){
                        let index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);
                        parent.layui.table.reload('categoryTable');
                    }
                }
            })
        })

    })

    function btnSubmit() {
        $('#submitBtn').click()
    }

    //th:if="${product.status} eq 1"
    //动态生成父类目下拉菜单
    function findParent() {
        var oldPid = $('#oldPid').val();
        $.ajax({
            type:'post',
            url:'/system/category/findAll',
            data:{
                pid:0
            },
            dataType:'json',
            success:function (res) {

                var obj = $('#pid');

                //清除里面内容
                $(obj).empty();

                var option = "";
                if (oldPid == 0){
                    option = '<option value="0">请选择父类目</option>';
                    $(obj).append(option);
                    $.each(res.data,function (i,data) {
                        option = '<option value="'+data.id+'"> '+data.name+'</option>';
                        $(obj).append(option);
                    })
                }else {
                    $.each(res.data,function (i,data) {
                        if (data.id == oldPid){
                            option = '<option value="'+data.id+'"  selected> '+data.name+'</option>';
                        }else {
                            option = '<option value="'+data.id+'"> '+data.name+'</option>';
                        }
                        $(obj).append(option);
                    })
                }
                form.render('select');//指定表单刷新

            }
        })
    }
</script>
</body>
</html>